<template>
  <view class="box">
    <view class="item" v-for="(item, index) in list" :key="index" @click="goPage(`/pages/home/caseDetails?id=${item?.id}`)">
      <image class="img" :src="item?.picUrl" mode="aspectFill" />
      <view class="btm">
        <view class="tit">{{ item?.title }}</view>
        <view class="user">
          <view class="l">
            <u-avatar size="20" :src="item?.headPicUrl"></u-avatar>
            {{ item?.userName }}
          </view>
          <view class="zan">
            <image @click="likeFn(1)" v-if="'1' === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
            <image @click="likeFn(1)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
            <text> {{ item?.thumbSum }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { beautifySelectInfoLst } from "@/api/home";
import { goPage } from "@/utils/commonFn";
const list = ref<any[]>([]);
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
const goodsStatus = ref("loadmore");
const goodsPage = ref(1);
onMounted(async () => {
  getList();
});
const likeFn = async (item: any) => {
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  const res = await beautifySelectInfoLst({ pageNo: goodsPage.value });
  list.value = list.value.concat(res.data.list);
  if (!res.data.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
</script>
<style lang="less" scoped>
.box {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 15rpx;
}
.item {
  width: 49%;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  .btm {
    padding: 18rpx;
  }
  .img {
    width: 100%;
    background: #d3afa2;
  }
  .tit {
    font-size: 28rpx;
    color: #000000;
  }
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    .l {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #8a8a8d;
      gap: 6rpx;
    }
  }
}
.zan {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #8a8a8d;
  .heart {
    width: 36rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }
}
</style>
